<template>
    <div class="px-6">
        <el-form-item label="欢迎语" prop="welcome_introducer" label-width="60px">
            <div class="w-[560px]">
                <el-input
                    v-model="formData.welcome_text"
                    placeholder=""
                    type="textarea"
                    :autosize="{ minRows: 8, maxRows: 8 }"
                    clearable
                    resize="none"
                />
                <div class="form-tips">
                    打开聊天窗口后会主动发送，添加双井号可添加提问示例
                </div>
            </div>
        </el-form-item>

        <el-form-item label="指令集" prop="instruction" label-width="60px">
            <div class="w-[560px]">
                <div class="mb-2">
                    <el-button type="primary">添加指令</el-button>
                </div>
                <el-table
                    ref="tableRef"
                    v-loading="pager.loading"
                    :data="pager.lists"
                    row-key="id"
                >
                    <el-table-column label="关键词" prop="keyword" min-width="200" />
                    <el-table-column label="附件" width="70">
                        <template #default="{ row }">
                            <el-tag v-if="row.annex.length > 0" type="primary">
                                {{ row.annex.length }}
                            </el-tag>
                            <el-tag v-else type="info">
                                {{ row.annex.length }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" width="70">
                        <template #default="{ row }">
                            <el-tag v-if="row.scene === 'fixed'" type="info">固定</el-tag>
                            <el-tag v-if="row.scene === 'direct'" type="info">指令</el-tag>

                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="110">
                        <template #default>
                            <el-button type="primary" link>查看</el-button>
                            <el-button type="danger" link>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="w-full flex justify-end my-4 mb-0">
                    <paging
                        v-model="pager"
                        layout="prev, pager, next"
                        size="small"
                        @change="queryLists"
                    />
                </div>
            </div>
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { usePaging } from '@/hooks/usePaging'
import robotInstructApi from '@/api/agent/robot/instruct'

const props = defineProps<{
    modelValue: Record<string, any>
}>()

const emits = defineEmits<{
    (event: 'update:modelValue', value: Record<string, any>): void
}>()

const formData = useVModel(props, 'modelValue', emits)

// 查询指令
const queryParams = reactive({ robot_id: 0 })
const { pager, queryLists } = usePaging({
    fetchFun: robotInstructApi.lists,
    params: queryParams
})

watch(
    () => formData.value.id,
    async (value) => {
        if (value) {
            queryParams.robot_id = value
            await queryLists()
        }
    },
    { immediate: true }
)
</script>
